<template>
	<view>
		<!-- tabbar导航栏 -->
		<scroll-view scroll-x="true" show-scrollbar="false" :scroll-into-view="scrollinto" scroll-with-animation
			class="scroll-row" style="height: 100rpx;">
			<view v-for="(item,index) in tabList" :key="index" :id="'tab'+index"
				class="scroll-row-item px-4 py-2 font-weight-bold"
				:class="tabIndex === index ? 'font-lg text-main font-weight-bold' : ''" @click="changeTab(index)">
				{{item.classname}}
			</view>
		</scroll-view>
		<!-- 列表滑动 -->
		<swiper :duration="500" :current="tabIndex" @change="onChangetab" :style="'height:'+scrollH+'px'">
			<swiper-item v-for="(item,index) in newList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="loadMore(index)">
					<!-- 列表有数据 -->
					<template v-if="item.list.length > 0">
						<!-- 列表组件 -->
						<block v-for="(item2,index2) in item.list" :key="index2">
							<topicList :item="item2" :index="index2" :choose="true" @follow='follow'></topicList>
							<divider></divider>
						</block>
						<!-- 上拉加载更多 -->
						<loadMore :loadMore="item.loadMore"></loadMore>
					</template>
					<template v-else-if="!item.fristLoad">
						<view class="flex justify-center align-center py-5 text-muted">加载中...</view>
					</template>
					<template v-else>
						<nothing></nothing>
					</template>
					
				</scroll-view>
			</swiper-item>

		</swiper>


	</view>
</template>

<script>
	import topicList from '@/components/news/topic-list.vue';
	import loadMore from '@/components/common/loadmore.vue'
	export default {
		components: {
			topicList,
			loadMore
		},
		data() {
			return {
				//列表高度
				scrollH: 600,
				//默认选择导航第一项
				tabIndex: 0,
				//导航自动定位选中项到第一位
				scrollinto: '',
				tabList: [],
				newList: [],
				choose:false
			}
		},
		//监听原生搜索框点击事件
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url: '../search/search',
			
			});
		},
		//监听原生搜索栏按钮事件
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'../add-input/add-input'
			})
		},
		onLoad(e) {
			uni.getSystemInfo({
				success(res) {
					this.scrollH = res.windowHeight - uni.upx2px(120)
				}
			})
			if(e.choose){
				uni.setNavigationBarTitle({
					title:'选择话题'
				})
				this.choose = true
			}
			this.getData()
		},
		methods: {
			//获取分类导航
			getData() {
				this.$H.get('/topicclass').then(res => {
					this.tabList = res.list
					var arr =[]
					for(var i =0 ;i<this.tabList.length; i++){
						let obj = {
							loadMore:'上拉加载更多',
							list:[],
							page:1,
							fristLoad:false //为true加载过false没有加载过
						}
						arr.push(obj)
					}
					this.newList = arr
					if(this.tabList.length){
						this.getList()
					}
				})
			},
			//获取分类数据
			getList(){
				let index = this.tabIndex
				let id = this.tabList[index].id
				let page = this.newList[index].page
				let isrefresh = page ===1 //判断page是否等于1等于1为true否则为false
				this.$H.get('/topicclass/'+id+'/topic/'+page).then( res => {
					let list = res.list.map( v => {
						return {
							id:v.id,
							cover: v.titlepic,
							title: v.title,
							desc: v.desc,
							today_count: v.todaypost_count,
							news_count: v.post_count
						}
					})
				if(isrefresh){
					 this.newList[index].fristLoad = true
					 
				 }
				 this.newList[index].loadMore = list.length < 10 ? '没有更多了':'上拉加载更多'
				 this.newList[index].list = isrefresh ? list : [...this.newList[index].list,...list]
				}).catch( err => {
					if(!isrefresh){
						this.newList[index].page  --
					}
					
				})
			},
			//导航栏与列表同步
			onChangetab(e) {
				this.changeTab(e.detail.current)
			},
			//导航栏选中事件
			changeTab(index) {
				if (this.tabIndex === index) {
					return
				}
				this.tabIndex = index
				this.scrollinto = 'tab' + index
				if(!this.newList[index].fristLoad){
					this.getList()
				}
			},

			follow(e) {
				this.newList[e].list.forEach((v => {
					if(v.id == e){
						v.isFollow = true
					}
					
				}))
				uni.showToast({
					title: '关注成功'
				});
			},
			//上拉加载更多
			loadMore(index) {
				const item = this.newList[index]
				if (item.loadMore !== '上拉加载更多') {
					return
				}
				item.loadMore = '加载中..'
				//模拟加载数据
				item.page ++ 
				this.getList()
			}
		}
	}
</script>

<style>
	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}
</style>
